<template>
  <uni-nav-bar :title="fillingInfo.name" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">
    <view style="font-size: 36rpx;">{{fillingInfo.name}}</view>
    <view style="margin: 10rpx 0px;">补液单价：{{fillingInfo.price}}元/公斤</view>
    <view>{{fillingInfo.address}}</view>
  </view>
  <view class="package">
    <view>账户余额</view>
    <view><text>￥</text><text style="font-size: 60rpx;">{{fillingInfo.money}}</text></view>
  </view>
  <view class="package space-between ability" style="background: transparent;padding: 0px;">
    <view v-for="item in list" :key="item" @click="jump(item.name,item.push)">{{item.name}}</view>
  </view>
</template>

<script setup lang="ts">
  import { onShow } from '@dcloudio/uni-app';
  import { navBack, navTo } from '@/utils/navigator';
  import { fillingStation } from '@/stores/keyRehydration';
  import { scanQRCode } from '@/utils/wechat.jssdk';
  /**
   * 店铺专营补液员首页
   */
  const fillingInfo = fillingStation();
  onShow(() => {
    fillingInfo.getDeliveryIn()
  })
  const list = [{ name: '补液', push: 'keyRehydration/filling/fluid' },
  { name: '账户明细', push: 'keyRehydration/account/accountDetails' },
  { name: '补液记录', push: 'keyRehydration/filling/fluidList' },
  { name: '售液记录', push: 'keyRehydration/filling/sellFill' },
  { name: '加注机', push: 'keyRehydration/filling/fillList' }]
  /**
   * 跳转补液信息页面
   * @param {String} name 选择跳转的名称
   * @param {String} push 选择跳转的路径
   */
  function jump(name : string, push : string) {
    if (name == '补液') {
      scanQRCode((res : any) => {
        const orderIDs = res.resultStr.split('fill_id=')[1];
        if (orderIDs) {
          uni.setStorageSync('fillingID', orderIDs);
          navTo(push)
        } else {
          alert('请扫描正确的二维码进行加注');
        }
      });
    } else {
      navTo(push)
    }
  }
</script>

<style scoped lang="less">
  .ability {
    flex-wrap: wrap;

    view {
      width: 48.5%;
      height: 102rpx;
      background: #FFFFFF;
      border: 1px solid #EEF3F7;
      border-radius: 6px;
      text-align: center;
      line-height: 102rpx;
      margin-bottom: 15rpx;
    }
  }
</style>